<template>
	<view class="workFlow-v">
		<view class="workFlow-list" style="margin-top: 24rpx; padding: 0">
			<view class="part">
				<view class="caption">登陆者({{ baseInfo.realName }})</view>
			</view>
		</view>
		<view class="search-box_sticky">
			<view class="head-tabs u-flex u-row-around">
				<view class="head-tabs-item" @click="openPage('/pages/workFlow/flowLaunch/index')">
					<text class="icon-ym icon-ym-flowLaunch-app u-m-r-4 icon-style" />
					<text>我发起的</text>
				</view>
				<uni-badge size="small" :text="waitTotal" absolute="rightTop" type="primary">
					<view class="head-tabs-item" @click="openPage('/pages/workFlow/flowTodo/index')">
						<text class="icon-ym icon-ym-flowTodo-app u-m-r-4 icon-style" />
						<text>待办事宜</text>
					</view>
				</uni-badge>
				<view class="head-tabs-item" @click="openPage('/pages/workFlow/flowDone/index')">
					<text class="icon-ym icon-ym-flowDone-app u-m-r-4 icon-style" />
					<text>已办事宜</text>
				</view>
				<view class="head-tabs-item" @click="openPage('/pages/workFlow/flowCopy/index')">
					<text class="icon-ym icon-ym-flowCopy-app u-m-r-4 icon-style" />
					<text>抄送我的</text>
				</view>
				<view class="head-tabs-item" @click="openPage('/pages/workFlow/flowMonitor/index')">
					<u-icon name="coupon" size="55" style="margin: 0 0 10rpx 0"></u-icon>
					<text>流程监控</text>
				</view>
			</view>
			<view class="search-box">
				<u-search placeholder="请输入关键词搜索" v-model="keyword" height="72" :show-action="false" @change="search"
					bg-color="#f0f2f6" shape="square">
				</u-search>
			</view>
			<!-- 	<u-tabs :list="categoryList" :current="current" @change="change" :is-scroll="true" name="fullName">
			</u-tabs> -->
		</view>
		<mescroll-body ref="mescrollRef" @down="downCallback" :down="downOption" :sticky="false" @up="upCallback"
			:up="upOption" :bottombar="false" style="min-height: 100%" @init="mescrollInit">
			<view class="workFlow-list">
				<view class="part">
					<view class="caption">常用表单</view>
					<view class="u-flex u-flex-wrap">
						<view class="item u-flex-col u-col-center" v-for="(item, i) in usualList" :key="i"
							@click="handelClick(item)">
							<text class="u-font-40 item-icon" :class="item.icon"
								:style="{ background: item.iconBackground || '#008cff' }" />
							<text class="u-font-24 u-line-1 item-text">{{
                item.fullName
              }}</text>
						</view>
						<view class="item u-flex-col u-col-center" @click="moreApp">
							<text class="u-font-40 item-icon more">+</text>
							<text class="u-font-24 u-line-1 item-text">添加</text>
						</view>
					</view>
				</view>
				<view class="part">
					<u-tabs :list="tabsList" :is-scroll="false" :current="current" @change="changeTabs"></u-tabs>
					<!-- 财务管理 -->
					<view class="u-flex u-flex-wrap" v-if="current===0">
						<view class="item u-flex-col u-col-center" v-for="(item,index) in addList"
							@click="handelClickAdd(index)">
							<text class="u-font-40 item-icon" :class="item.icon" :style="{ background:  '#008cff' }" />
							<text class="u-font-24 u-line-1 item-text">{{item.name}}</text>
						</view>
					</view>
					<!-- 扫码报工 -->
					<view class="u-flex u-flex-wrap" v-if="current===1">
						<view class="item u-flex-col u-col-center" v-for="(item,index) in ScanList"
							@click="handelClickScan(index)">
							<text class="u-font-40 item-icon" :class="item.icon" :style="{ background:  '#008cff' }" />
							<text class="u-font-24 u-line-1 item-text">{{item.name}}</text>
						</view>
					</view>
				</view>
			</view>
		</mescroll-body>

		<u-modal v-model="modalShow" :title="title" confirm-text="更新" show-cancel-button @confirm="confirm"
			@cancel="cancel" :async-close="true">
			<view class="Version">
				<text>新版本：{{ newestVersion }}</text>
				<text v-if="this.romName = 'Android'" style="color: blue" @click="DownloadOnline">无法安装点这里</text>
			</view>
			<view style="margin: 20rpx 30rpx">更新内容:</view>
			<view style="margin: 20rpx 30rpx">{{ description }}</view>
			<view v-if="percent > 0" style="margin: 20rpx 30rpx">
				<u-line-progress :striped="true" :percent="percent" :striped-active="true"></u-line-progress>
				<view style="font-size: 12rpx">
					{{ totalBytesWritten.toFixed(2) }}M/{{
            totalBytesExpectedToWrite.toFixed(2)
          }}M
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import {
		UserSettingInfo,
		getApp
	} from "@/api/common";
	import define from "@/utils/define";
	import {
		FlowEngineListAll,
		FlowEnginePageList,
	} from "@/api/workFlow/flowEngine";
	import {
		getWaitTotal
	} from "@/api/workFlow/flowBefore";
	import {
		getUsualList
	} from "@/api/apply/apply.js";
	import resources from "@/libs/resources.js";
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import IndexMixin from "./mixin.js";
	export default {
		mixins: [MescrollMixin, IndexMixin],

		data() {
			return {
				current: 0,
				waitTotal: 0,
				tabsList: [{
						name: '财务管理'
					},
					{
						name: '扫码报工'
					},
				],
				usualList: [],
				addList: [{
						name: '费用预算',
						icon: "icon-ym icon-ym-webForm"
					},
					{
						name: '费用申请单',
						icon: "icon-ym icon-ym-sysIcon"
					},
					{
						name: '借款单',
						icon: "icon-ym icon-ym-huibao"
					},
					{
						name: '还款单',
						icon: "icon-ym icon-ym-wf-staffOvertime"
					},
					{
						name: '费用报销单',
						icon: "icon-ym icon-ym-tree-manage1"
					},
				],
				ScanList: [{
					name: '生产工作台',
					icon: "icon-ym icon-ym-wf-receiptSign"
				}],
				downOption: {
					use: true,
					auto: true,
				},
				localPackage: true,
				className: "",
				upOption: {
					page: {
						num: 0,
						size: 50,
						time: null,
					},
					empty: {
						use: true,
						icon: resources.message.nodata,
						tip: "暂无数据",
						fixed: false,
						top: "560rpx",
					},
					textNoMore: "没有更多数据",
				},
				keyword: "",
				category: "",
				categoryList: [],
				list: [],
				fullName: "",
				loading: false,
				baseInfo: "",
				modalShow: false,
				downlaodTask: "",
				title: "发现新版本",
				description: "",
				percent: 0,
				totalBytesWritten: "",
				totalBytesExpectedToWrite: "",
				romName: "", //平台名称
				currentVersion: "", //当前版本号
				newestVersion: "", //最新版本号
				apkUrl: "", //下载地址
				sysConfigInfo: {}
			};
		},
		onLoad() {
			uni.$on("updateUsualList", (data) => {
				this.getUsualList();
			});
			this.getPaymentMethodOptions();
			uni.$on("refresh", () => {
				this.list = [];
				this.current = 0;
				this.mescroll.resetUpScroll();
			});
		},
		onShow() {
			// #ifdef APP-PLUS
			this.updataApp();
			// #endif
			UserSettingInfo().then((res) => {
				this.baseInfo = res.data || {};
				this.loading = true;
			});
			getWaitTotal().then((res) => {
				this.waitTotal = res.data || 0;
			});
		},
		onUnload() {
			uni.$off("updateUsualList");
		},
		methods: {
			changeTabs(e) {
				this.current = e
			},
			updataApp() {
				this.sysConfigInfo = uni.getStorageSync('sysConfigInfo');
				plus.runtime.getProperty(plus.runtime.appid, (wgtinfo) => {
					this.romName = plus.os.name;
					this.currentVersion = wgtinfo.version;
					getApp().then((res) => {
						this.description = res.data.list[0].description;
						this.newestVersion = res.data.list[0].version;
						let name = null;
						if (res.data.list[0].downAddress.length > 0) {
							name = res.data.list[0].downAddress[0].name;
							this.apkUrl = this.sysConfigInfo.commonUrl + "/api/File/down/" + name;
							this.percent = 0;
							this.totalBytesWritten = "";
							this.totalBytesExpectedToWrite = "";
						}
						if (this.newestVersion > this.currentVersion) {
							this.title = "发现新版本";
							this.modalShow = true;
						}
						if (name) return this.localPackage = true;
						this.localPackage = false;
					});
				});
			},
			confirm() {
				this.title = "下载APP版本中,请勿关闭App!";
				if (this.romName === "Android") {
					if (this.localPackage) {
						this.downlaodTask = uni.downloadFile({
							header: {
								Authorization: uni.getStorageSync("token"),
							},
							url: this.apkUrl,
							success: (res) => {
								if (res.statusCode === 200) {
									this.modalShow = false;
									plus.runtime.install(
										res.tempFilePath, {
											force: false,
										},
										function() {
											plus.runtime.restart();
										}
									);
								}
							},
						});
						this.downlaodTask.onProgressUpdate((res) => {
							const {
								progress,
								totalBytesWritten,
								totalBytesExpectedToWrite
							} =
							res;
							this.percent = progress;
							this.totalBytesWritten = totalBytesWritten / 1048576;
							this.totalBytesExpectedToWrite = totalBytesExpectedToWrite / 1048576;
						});
					} else {
						this.modalShow = false;
						let andDownUrl = this.sysConfigInfo.andDownUrl;
						plus.runtime.openURL(andDownUrl);
					}
				} else {
					this.modalShow = false;
					let iosDownUrl = this.sysConfigInfo.iosDownUrl
					plus.runtime.openURL(iosDownUrl);
				}
			},
			cancel() {
				this.modalShow = false;
				if (this.downlaodTask) {
					this.downlaodTask.abort();
				}
			},
			DownloadOnline() {
				if (this.romName === "Android") {
					let andDownUrl = this.sysConfigInfo.andDownUrl;
					plus.runtime.openURL(andDownUrl);
				} else {
					let iosDownUrl = this.sysConfigInfo.iosDownUrl
					plus.runtime.openURL(iosDownUrl);
				}
				this.modalShow = false;
			},
			openPage(path) {
				if (!path) return;
				uni.navigateTo({
					url: path,
				});
			},
			upCallback(page) {
				this.$nextTick(() => {
					this.getUsualList();
				});
				let query = {
					currentPage: page.num,
					pageSize: page.size,
					keyword: this.keyword,
					category: this.category == 0 ? "" : this.category,
				};
				this.loading = false;
				FlowEnginePageList(query, {
						load: page.num == 1,
					})
					.then((res) => {
						let resData = res.data.list || [];
						this.mescroll.endSuccess(resData.length);
						if (page.num == 1) this.list = [];
						const list = resData.map((o) => ({
							show: false,
							...o,
						}));
						this.list = this.list.concat(list);
						this.loading = true;
					})
					.catch(() => {
						this.mescroll.endErr();
					});
			},
			search() {
				this.searchTimer && clearTimeout(this.searchTimer);
				this.searchTimer = setTimeout(() => {
					this.list = [];
					this.mescroll.resetUpScroll();
				}, 300);
			},
			//获取常用
			getUsualList() {
				getUsualList(1).then((res) => {
					this.usualList = res.data.list.map((o) => {
						const objectData = o.objectData ? JSON.parse(o.objectData) : {};
						return {
							...o,
							...objectData,
						};
					});
				});
			},
			getPaymentMethodOptions() {
				this.$store
					.dispatch("base/getDictionaryData", {
						sort: "WorkFlowCategory",
					})
					.then((res) => {});
			},
			moreApp() {
				uni.navigateTo({
					url: "/pages/workFlow/allApp/index?categoryList=" +
						encodeURIComponent(JSON.stringify(this.categoryList)),
				});
			},
			// 财务管理点击
			handelClickAdd(item) {
				// 创建一个对象来映射item值到对应的enCode和flowId
				const mappings = {
					0: {
						enCode: 'OASTE',
						flowId: '584685757499847429',
						url: '/pages/workFlow/workFlowForm/oaste/addFrom'
					},
					1: {
						enCode: 'OASTG',
						flowId: '585252584625944069',
						url: '/pages/workFlow/workFlowForm/oastg/addFrom'
					},
					2: {
						enCode: 'OASTI',
						flowId: '585610588588226501',
						url: '/pages/workFlow/workFlowForm/oasti/addFrom'
					},
					3: {
						enCode: 'OASTL',
						flowId: '593574438675568837',
						url: '/pages/workFlow/workFlowForm/oastl/addFrom'
					},
					4: {
						enCode: 'OASTA',
						flowId: '574766005054738693',
						url: '/pages/workFlow/workFlowForm/oasta/addFrom'
					},
				};
				// 使用映射对象来设置enCode和flowId
				let enCode = mappings[item].enCode
				let flowId = mappings[item].flowId
				let url = mappings[item].url
				let config = {
					enCode,
					flowId,
					id: "",
					formType: 1,
					opType: "-1",
					status: null,
					addStatus: true,
				};
				uni.setStorageSync('complexObject', JSON.stringify(config));
				uni.navigateTo({
					url: '/pages/workFlow/flowBefore/index'
				})
			},
			// 扫码报工点击
			handelClickScan(item) {
				// 创建一个对象来映射item值到对应的enCode和flowId
				const mappings = {
					0: {
						enCode: 'OASTE',
						flowId: '584685757499847429',
						url: '/pages/workFlow/workFlowForm/oaste/addFrom'
					},
				};
				// 使用映射对象来设置enCode和flowId
				let enCode = mappings[item].enCode
				let flowId = mappings[item].flowId
				let url = mappings[item].url
				let config = {
					enCode,
					flowId,
					id: "",
					formType: 1,
					opType: "-1",
					status: null,
					addStatus: true,
				};
				uni.setStorageSync('scanObject', JSON.stringify(config));
				uni.navigateTo({
					url: '/pages/workFlow/productionScan/index'
				})
			},

		},
	};
</script>

<style lang="scss">
	page {
		background-color: #f0f2f6;
	}

	.workFlow-v {
		.search-box_sticky {
			margin-bottom: 20rpx;

			.search-box {
				padding: 20rpx;
			}
		}

		.head-tabs {
			width: 100%;
			padding: 0 32rpx;
			height: 132rpx;

			.head-tabs-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				font-size: 28rpx;
				color: #666666;
				line-height: 40rpx;

				.icon-style {
					font-size: 48rpx;
					color: #606266;
					margin-bottom: 24rpx;
				}
			}
		}

		.workFlow-list {
			padding: 0rpx 20rpx 0;

			.part {
				background: #fff;
				border-radius: 8rpx;
				margin-bottom: 20rpx;

				.caption {
					padding-left: 32rpx;
					font-size: 36rpx;
					line-height: 100rpx;
					font-weight: bold;
				}

				.item {
					margin-bottom: 32rpx;
					width: 25%;

					.item-icon {
						width: 88rpx;
						height: 88rpx;
						margin-bottom: 8rpx;
						line-height: 88rpx;
						text-align: center;
						border-radius: 20rpx;
						color: #fff;
						font-size: 56rpx;

						&.more {
							background: #ececec;
							color: #666666;
							font-size: 50rpx;
						}
					}

					.item-text {
						width: 100%;
						text-align: center;
						padding: 0 16rpx;
					}
				}
			}
		}
	}

	.Version {
		display: flex;
		justify-content: space-between;
		margin: 20rpx 30rpx;
		color: #c5c5c5;
		font-size: 24rpx;
	}
</style>